<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 6 A Realistic Widget | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.21 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 6 A Realistic Widget | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 6 A Realistic Widget | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2021-04-19" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="widgets-first.html"/>
<link rel="next" href="widgets-full.html"/>
<script src="libs/jquery-3.5.1/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="libs/plotly-binding-4.9.3/plotly.js"></script>
<script src="libs/typedarray-0.1/typedarray.min.js"></script>
<link href="libs/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css-1.57.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main-1.57.1/plotly-latest.min.js"></script>
<script src="libs/core-js-2.5.3/shim.min.js"></script>
<script src="libs/react-16.12.0/react.min.js"></script>
<script src="libs/react-16.12.0/react-dom.min.js"></script>
<script src="libs/reactwidget-1.0.0/react-tools.js"></script>
<script src="libs/reactable-binding-0.2.3/reactable.js"></script>
<script src="libs/r2d3-render-0.1.0/r2d3-render.js"></script>
<script src="libs/webcomponents-2.0.0/webcomponents.js"></script>
<script src="libs/r2d3-binding-0.2.5/r2d3.js"></script>
<script src="libs/d3v6-6.2.0/d3.min.js"></script>
<script src="libs/viz-1.8.2/viz.js"></script>
<link href="libs/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding-1.0.6.1/grViz.js"></script>
<link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding-0.17/datatables.js"></script>
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core-1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74544116-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-74544116-1');
</script>
<meta property="og:title" content="Chapter 6 A Realistic Widget | JavaScript for R">
<meta property="og:description" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta property="og:image" content="https://book.javascript-for-r.com/images/social.png">
<meta property="og:url" content="https://book.javascript-for-r.com/">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Chapter 6 A Realistic Widget | JavaScript for R">
<meta name="twitter:image:alt" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta name="twitter:site" content="@jdatap">


<style type="text/css">
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(title);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a><ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics and Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="intro-overview.html"><a href="intro-overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a><ul>
<li class="chapter" data-level="1.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-overview-rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a><ul>
<li class="chapter" data-level="1.2.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a><ul>
<li class="chapter" data-level="1.3.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-reactr-vuer"><i class="fa fa-check"></i><b>1.3.1</b> reactR &amp; vueR</a></li>
<li class="chapter" data-level="1.3.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a><ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-package-dev"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a><ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-create-pkg"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#basics-installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#basics-build-load-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-json"><i class="fa fa-check"></i><b>2.2</b> JSON</a><ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-tabular"><i class="fa fa-check"></i><b>2.2.2</b> Tabular Data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a><ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-chrome-devtools"><i class="fa fa-check"></i><b>2.3.1</b> Developer Tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-var-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable Declaration and Scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document Object Model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a><ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-static-files"><i class="fa fa-check"></i><b>2.4.1</b> Serving Static Files</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-htmltools"><i class="fa fa-check"></i><b>2.4.2</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-deps-pro-cons"><i class="fa fa-check"></i><b>2.4.3</b> Serving vs. htmltools</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a><ul>
<li class="chapter" data-level="3.1" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-plotly"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-dt"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
<li class="chapter" data-level="3.3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-crosstalk"><i class="fa fa-check"></i><b>3.3</b> Crosstalk</a></li>
<li class="chapter" data-level="3.4" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-conclude"><i class="fa fa-check"></i><b>3.4</b> Wrap-up</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="widgets-basics.html"><a href="widgets-basics.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a><ul>
<li class="chapter" data-level="4.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-study"><i class="fa fa-check"></i><b>4.1</b> Read and Study</a></li>
<li class="chapter" data-level="4.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates"><i class="fa fa-check"></i><b>4.2</b> Candidate Libraries</a><ul>
<li class="chapter" data-level="4.2.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-plotly"><i class="fa fa-check"></i><b>4.2.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.2.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-highcharts"><i class="fa fa-check"></i><b>4.2.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.2.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-chart.js"><i class="fa fa-check"></i><b>4.2.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-inner-workings"><i class="fa fa-check"></i><b>4.3</b> How It Works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="widgets-first.html"><a href="widgets-first.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a><ul>
<li class="chapter" data-level="5.1" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-htmloutput"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-js-files"><i class="fa fa-check"></i><b>5.3</b> JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="widgets-realistic.html"><a href="widgets-realistic.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a><ul>
<li class="chapter" data-level="6.1" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-deps"><i class="fa fa-check"></i><b>6.1</b> Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-implementation"><i class="fa fa-check"></i><b>6.2</b> Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-html-element"><i class="fa fa-check"></i><b>6.3</b> HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="widgets-full.html"><a href="widgets-full.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a><ul>
<li class="chapter" data-level="7.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-deps"><i class="fa fa-check"></i><b>7.1</b> Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-js"><i class="fa fa-check"></i><b>7.2</b> JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a><ul>
<li class="chapter" data-level="7.4.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-js"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify"><i class="fa fa-check"></i><b>7.4.2</b> Modify Serialiser</a></li>
<li class="chapter" data-level="7.4.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-replace"><i class="fa fa-check"></i><b>7.4.3</b> Replace Serialiser</a></li>
<li class="chapter" data-level="7.4.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify-data"><i class="fa fa-check"></i><b>7.4.4</b> Modify the Data</a></li>
<li class="chapter" data-level="7.4.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-conclusion"><i class="fa fa-check"></i><b>7.4.5</b> Pros and Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-on-print"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="widgets-adv.html"><a href="widgets-adv.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a><ul>
<li class="chapter" data-level="8.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-shared"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a><ul>
<li class="chapter" data-level="8.1.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prerender"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks and Security</a></li>
<li class="chapter" data-level="8.4" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-js"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prepend-append"><i class="fa fa-check"></i><b>8.5</b> Prepend and Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a><ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk Examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-req"><i class="fa fa-check"></i><b>9.2</b> Crosstalk Requirements</a></li>
<li class="chapter" data-level="9.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-inner-workings"><i class="fa fa-check"></i><b>9.3</b> How it Works</a><ul>
<li class="chapter" data-level="9.3.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-keys"><i class="fa fa-check"></i><b>9.3.1</b> Keys</a></li>
<li class="chapter" data-level="9.3.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-communication-lines"><i class="fa fa-check"></i><b>9.3.2</b> Communication Lines</a></li>
<li class="chapter" data-level="9.3.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-groups"><i class="fa fa-check"></i><b>9.3.3</b> Groups</a></li>
</ul></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with Gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-r"><i class="fa fa-check"></i><b>9.5</b> R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-js"><i class="fa fa-check"></i><b>9.6</b> JavaScript Code</a><ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-send-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send Selected Keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-set-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set Selected Keys</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-using"><i class="fa fa-check"></i><b>9.7</b> Using Crosstalk with Gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="widgets-final.html"><a href="widgets-final.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a><ul>
<li class="chapter" data-level="10.1" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets and Data</a></li>
<li class="chapter" data-level="10.2" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-interface"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
<li class="chapter" data-level="10.4" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-exercises"><i class="fa fa-check"></i><b>10.4</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="11" data-path="shiny-intro.html"><a href="shiny-intro.html"><i class="fa fa-check"></i><b>11</b> Bidirectional Communication</a><ul>
<li class="chapter" data-level="11.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-websocket"><i class="fa fa-check"></i><b>11.1</b> WebSocket an Shiny</a></li>
<li class="chapter" data-level="11.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-sessions"><i class="fa fa-check"></i><b>11.2</b> Sessions</a></li>
<li class="chapter" data-level="11.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-example"><i class="fa fa-check"></i><b>11.3</b> Alerts, an example</a><ul>
<li class="chapter" data-level="11.3.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-explore"><i class="fa fa-check"></i><b>11.3.1</b> Explore</a></li>
<li class="chapter" data-level="11.3.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-r-to-js"><i class="fa fa-check"></i><b>11.3.2</b> From R to JavaScript</a></li>
<li class="chapter" data-level="11.3.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-serialise"><i class="fa fa-check"></i><b>11.3.3</b> Serialisation</a></li>
<li class="chapter" data-level="11.3.4" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-js2r"><i class="fa fa-check"></i><b>11.3.4</b> JavaScript to R</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="12" data-path="shiny-complete.html"><a href="shiny-complete.html"><i class="fa fa-check"></i><b>12</b> A Complete Integration</a><ul>
<li class="chapter" data-level="12.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-discover"><i class="fa fa-check"></i><b>12.1</b> Discover</a></li>
<li class="chapter" data-level="12.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-setup"><i class="fa fa-check"></i><b>12.2</b> Setup</a></li>
<li class="chapter" data-level="12.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-dependencies"><i class="fa fa-check"></i><b>12.3</b> Dependencies</a></li>
<li class="chapter" data-level="12.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-images"><i class="fa fa-check"></i><b>12.4</b> Static Files</a></li>
<li class="chapter" data-level="12.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-skeleton"><i class="fa fa-check"></i><b>12.5</b> Skeleton</a></li>
<li class="chapter" data-level="12.6" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-r2js"><i class="fa fa-check"></i><b>12.6</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.7" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-js2r"><i class="fa fa-check"></i><b>12.7</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.8" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-input-handler"><i class="fa fa-check"></i><b>12.8</b> Input handler</a></li>
<li class="chapter" data-level="12.9" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg"><i class="fa fa-check"></i><b>12.9</b> As a Package</a><ul>
<li class="chapter" data-level="12.9.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-deps"><i class="fa fa-check"></i><b>12.9.1</b> Dependencies</a></li>
<li class="chapter" data-level="12.9.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-trigger"><i class="fa fa-check"></i><b>12.9.2</b> Trigger classification</a></li>
<li class="chapter" data-level="12.9.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-js-code"><i class="fa fa-check"></i><b>12.9.3</b> JavaScript code</a></li>
<li class="chapter" data-level="12.9.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-input-handler"><i class="fa fa-check"></i><b>12.9.4</b> Input handler</a></li>
<li class="chapter" data-level="12.9.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-test"><i class="fa fa-check"></i><b>12.9.5</b> Test</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="13" data-path="shiny-tips.html"><a href="shiny-tips.html"><i class="fa fa-check"></i><b>13</b> Tips and Tricks</a><ul>
<li class="chapter" data-level="13.1" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-events"><i class="fa fa-check"></i><b>13.1</b> Shiny Events</a></li>
<li class="chapter" data-level="13.2" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-table-btn"><i class="fa fa-check"></i><b>13.2</b> Table Buttons</a></li>
<li class="chapter" data-level="13.3" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-jQuery"><i class="fa fa-check"></i><b>13.3</b> jQuery</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="shiny-output.html"><a href="shiny-output.html"><i class="fa fa-check"></i><b>14</b> Custom Outputs</a><ul>
<li class="chapter" data-level="14.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inner-workings"><i class="fa fa-check"></i><b>14.1</b> Inner-workings</a></li>
<li class="chapter" data-level="14.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-setup"><i class="fa fa-check"></i><b>14.2</b> Setup</a></li>
<li class="chapter" data-level="14.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-r-fun"><i class="fa fa-check"></i><b>14.3</b> Output R Function</a></li>
<li class="chapter" data-level="14.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-html"><i class="fa fa-check"></i><b>14.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="14.5" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-renderer"><i class="fa fa-check"></i><b>14.5</b> Output Renderer</a></li>
<li class="chapter" data-level="14.6" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-binding"><i class="fa fa-check"></i><b>14.6</b> JavaScript Output Binding</a><ul>
<li class="chapter" data-level="14.6.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-title"><i class="fa fa-check"></i><b>14.6.1</b> Boxxy Title</a></li>
<li class="chapter" data-level="14.6.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-value"><i class="fa fa-check"></i><b>14.6.2</b> Boxxy Value</a></li>
<li class="chapter" data-level="14.6.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-bg-color"><i class="fa fa-check"></i><b>14.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="14.6.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-register"><i class="fa fa-check"></i><b>14.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="14.7" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-usage"><i class="fa fa-check"></i><b>14.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="14.8" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inject"><i class="fa fa-check"></i><b>14.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="14.9" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-preprocess"><i class="fa fa-check"></i><b>14.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="shiny-input.html"><a href="shiny-input.html"><i class="fa fa-check"></i><b>15</b> Custom Inputs</a><ul>
<li class="chapter" data-level="15.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-setup"><i class="fa fa-check"></i><b>15.1</b> Setup</a></li>
<li class="chapter" data-level="15.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-intro"><i class="fa fa-check"></i><b>15.2</b> Switch Input HTML and Style</a></li>
<li class="chapter" data-level="15.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-html"><i class="fa fa-check"></i><b>15.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="15.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-binding"><i class="fa fa-check"></i><b>15.4</b> JavaScript Input Binding</a><ul>
<li class="chapter" data-level="15.4.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-find"><i class="fa fa-check"></i><b>15.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="15.4.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-id"><i class="fa fa-check"></i><b>15.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="15.4.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-value"><i class="fa fa-check"></i><b>15.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="15.4.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-set-value"><i class="fa fa-check"></i><b>15.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="15.4.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-receive-msg"><i class="fa fa-check"></i><b>15.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="15.4.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-sub-unsub"><i class="fa fa-check"></i><b>15.4.6</b> Subscribe and Unsubscribe Inputs</a></li>
<li class="chapter" data-level="15.4.7" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-rate-policy"><i class="fa fa-check"></i><b>15.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="15.4.8" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-register"><i class="fa fa-check"></i><b>15.4.8</b> Registering the Input Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-update"><i class="fa fa-check"></i><b>15.5</b> Update Input</a></li>
<li class="chapter" data-level="15.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-excercise"><i class="fa fa-check"></i><b>15.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="shiny-cookies.html"><a href="shiny-cookies.html"><i class="fa fa-check"></i><b>16</b> Cookies</a><ul>
<li class="chapter" data-level="16.1" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-discover"><i class="fa fa-check"></i><b>16.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="16.2" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-setup"><i class="fa fa-check"></i><b>16.2</b> Setup Project</a></li>
<li class="chapter" data-level="16.3" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-javascript"><i class="fa fa-check"></i><b>16.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="16.4" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-r-code"><i class="fa fa-check"></i><b>16.4</b> R Code</a></li>
<li class="chapter" data-level="16.5" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-exercises"><i class="fa fa-check"></i><b>16.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="shiny-widgets.html"><a href="shiny-widgets.html"><i class="fa fa-check"></i><b>17</b> Widgets with Shiny</a><ul>
<li class="chapter" data-level="17.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-to-r"><i class="fa fa-check"></i><b>17.1</b> Widgets to R</a></li>
<li class="chapter" data-level="17.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handlers"><i class="fa fa-check"></i><b>17.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="17.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-r-to-widgets"><i class="fa fa-check"></i><b>17.3</b> R to Widgets</a><ul>
<li class="chapter" data-level="17.3.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-send-data"><i class="fa fa-check"></i><b>17.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="17.3.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-retrieve"><i class="fa fa-check"></i><b>17.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="17.3.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handle-data"><i class="fa fa-check"></i><b>17.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-proxy"><i class="fa fa-check"></i><b>17.4</b> Proxy Function</a></li>
<li class="chapter" data-level="17.5" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-clear-data"><i class="fa fa-check"></i><b>17.5</b> Clear Data</a></li>
<li class="chapter" data-level="17.6" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-update"><i class="fa fa-check"></i><b>17.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV JavaScript for Computations</b></span></li>
<li class="chapter" data-level="18" data-path="v8.html"><a href="v8.html"><i class="fa fa-check"></i><b>18</b> The V8 Engine</a><ul>
<li class="chapter" data-level="18.1" data-path="v8.html"><a href="v8.html#v8-installation"><i class="fa fa-check"></i><b>18.1</b> Installation</a></li>
<li class="chapter" data-level="18.2" data-path="v8.html"><a href="v8.html#v8-basics"><i class="fa fa-check"></i><b>18.2</b> Basics</a></li>
<li class="chapter" data-level="18.3" data-path="v8.html"><a href="v8.html#v8-external"><i class="fa fa-check"></i><b>18.3</b> External Libraries</a></li>
<li class="chapter" data-level="18.4" data-path="v8.html"><a href="v8.html#v8-npm"><i class="fa fa-check"></i><b>18.4</b> NPM Packages</a></li>
<li class="chapter" data-level="18.5" data-path="v8.html"><a href="v8.html#v8-pkg"><i class="fa fa-check"></i><b>18.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="v8-ml.html"><a href="v8-ml.html"><i class="fa fa-check"></i><b>19</b> Machine Learning</a><ul>
<li class="chapter" data-level="19.1" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-dependency"><i class="fa fa-check"></i><b>19.1</b> Dependency</a></li>
<li class="chapter" data-level="19.2" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-regression"><i class="fa fa-check"></i><b>19.2</b> Simple Regression</a></li>
<li class="chapter" data-level="19.3" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-exercises"><i class="fa fa-check"></i><b>19.3</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>V Robust JavaScript</b></span></li>
<li class="chapter" data-level="20" data-path="webpack-intro.html"><a href="webpack-intro.html"><i class="fa fa-check"></i><b>20</b> Managing JavaScript</a><ul>
<li class="chapter" data-level="20.1" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-example"><i class="fa fa-check"></i><b>20.1</b> Example</a></li>
<li class="chapter" data-level="20.2" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-browser"><i class="fa fa-check"></i><b>20.2</b> Transpiling</a></li>
<li class="chapter" data-level="20.3" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-minification"><i class="fa fa-check"></i><b>20.3</b> Minification</a></li>
<li class="chapter" data-level="20.4" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-structure"><i class="fa fa-check"></i><b>20.4</b> Bundling and Modules</a></li>
<li class="chapter" data-level="20.5" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-decouple"><i class="fa fa-check"></i><b>20.5</b> Decoupling</a></li>
<li class="chapter" data-level="20.6" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-npm"><i class="fa fa-check"></i><b>20.6</b> NPM</a></li>
<li class="chapter" data-level="20.7" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-conclude"><i class="fa fa-check"></i><b>20.7</b> With R</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html"><i class="fa fa-check"></i><b>21</b> Discover Webpack and NPM</a><ul>
<li class="chapter" data-level="21.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install"><i class="fa fa-check"></i><b>21.1</b> Installation</a><ul>
<li class="chapter" data-level="21.1.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-mac"><i class="fa fa-check"></i><b>21.1.1</b> Mac OS</a></li>
<li class="chapter" data-level="21.1.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-ubuntu"><i class="fa fa-check"></i><b>21.1.2</b> Ubuntu</a></li>
<li class="chapter" data-level="21.1.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-windows"><i class="fa fa-check"></i><b>21.1.3</b> Windows</a></li>
<li class="chapter" data-level="21.1.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-other"><i class="fa fa-check"></i><b>21.1.4</b> Other</a></li>
</ul></li>
<li class="chapter" data-level="21.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-setup"><i class="fa fa-check"></i><b>21.2</b> Set Up the App</a></li>
<li class="chapter" data-level="21.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-init-npm"><i class="fa fa-check"></i><b>21.3</b> Initialise NPM</a></li>
<li class="chapter" data-level="21.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-pkgs"><i class="fa fa-check"></i><b>21.4</b> Installing NPM Packages</a></li>
<li class="chapter" data-level="21.5" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-entry-points"><i class="fa fa-check"></i><b>21.5</b> Entry Point and Output</a></li>
<li class="chapter" data-level="21.6" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-conf"><i class="fa fa-check"></i><b>21.6</b> Configuration File</a></li>
<li class="chapter" data-level="21.7" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-npm-scripts"><i class="fa fa-check"></i><b>21.7</b> NPM scripts</a></li>
<li class="chapter" data-level="21.8" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-webpack-mode"><i class="fa fa-check"></i><b>21.8</b> Source maps</a></li>
<li class="chapter" data-level="21.9" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-bundle"><i class="fa fa-check"></i><b>21.9</b> Bundle</a></li>
<li class="chapter" data-level="21.10" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-internal-dependencies"><i class="fa fa-check"></i><b>21.10</b> Internal Dependencies</a></li>
<li class="chapter" data-level="21.11" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-external-dependencies"><i class="fa fa-check"></i><b>21.11</b> External Dependencies</a></li>
<li class="chapter" data-level="21.12" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export"><i class="fa fa-check"></i><b>21.12</b> Import and Export</a><ul>
<li class="chapter" data-level="21.12.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-named"><i class="fa fa-check"></i><b>21.12.1</b> Named</a></li>
<li class="chapter" data-level="21.12.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-default"><i class="fa fa-check"></i><b>21.12.2</b> Default</a></li>
<li class="chapter" data-level="21.12.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-wrap-up"><i class="fa fa-check"></i><b>21.12.3</b> Wrap-up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="22" data-path="packer-overview.html"><a href="packer-overview.html"><i class="fa fa-check"></i><b>22</b> Webpack with R</a><ul>
<li class="chapter" data-level="22.1" data-path="packer-overview.html"><a href="packer-overview.html#packer-principles"><i class="fa fa-check"></i><b>22.1</b> Principles of packer</a></li>
<li class="chapter" data-level="22.2" data-path="packer-overview.html"><a href="packer-overview.html#packer-scaffolds"><i class="fa fa-check"></i><b>22.2</b> Scaffolds</a></li>
<li class="chapter" data-level="22.3" data-path="packer-overview.html"><a href="packer-overview.html#packer-inputs"><i class="fa fa-check"></i><b>22.3</b> Inputs</a></li>
<li class="chapter" data-level="22.4" data-path="packer-overview.html"><a href="packer-overview.html#packer-r-file"><i class="fa fa-check"></i><b>22.4</b> R file</a></li>
<li class="chapter" data-level="22.5" data-path="packer-overview.html"><a href="packer-overview.html#packer-js-files"><i class="fa fa-check"></i><b>22.5</b> JavaScript Files</a></li>
<li class="chapter" data-level="22.6" data-path="packer-overview.html"><a href="packer-overview.html#packer-bundle"><i class="fa fa-check"></i><b>22.6</b> Bundle</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="packer-adv.html"><a href="packer-adv.html"><i class="fa fa-check"></i><b>23</b> Webpack Advanced</a><ul>
<li class="chapter" data-level="23.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-widgets"><i class="fa fa-check"></i><b>23.1</b> Widgets</a></li>
<li class="chapter" data-level="23.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue"><i class="fa fa-check"></i><b>23.2</b> Shiny with Vue and Bootstrap 4</a><ul>
<li class="chapter" data-level="23.2.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-setup"><i class="fa fa-check"></i><b>23.2.1</b> Setup</a></li>
<li class="chapter" data-level="23.2.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-bs4"><i class="fa fa-check"></i><b>23.2.2</b> Bootstrap 4 Installation</a></li>
<li class="chapter" data-level="23.2.3" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-code"><i class="fa fa-check"></i><b>23.2.3</b> Vue Code</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>VI Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a><ul>
<li class="chapter" data-level="24.1" data-path="conclusion.html"><a href="conclusion.html#conclusion-performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#conclusion-trial-and-error"><i class="fa fa-check"></i><b>24.2</b> Trial and Error</a></li>
<li class="chapter" data-level="24.3" data-path="conclusion.html"><a href="conclusion.html#conclusion-ux"><i class="fa fa-check"></i><b>24.3</b> Functionality and UX</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="widgets-realistic" class="section level1">
<h1><span class="header-section-number">Chapter 6</span> A Realistic Widget</h1>
<p>In this section, we build a package called <code>peity</code>, which wraps the JavaScript library of the same name, <a href="https://github.com/benpickles/peity">peity.js</a>, to create inline charts. This builds upon many things we explored in the playground package built in the previous chapter.</p>
<div class="sourceCode" id="cb85"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb85-1" title="1">usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;peity&quot;</span>)</a>
<a class="sourceLine" id="cb85-2" title="2">htmlwidgets<span class="op">::</span><span class="kw">scaffoldWidget</span>(<span class="st">&quot;peity&quot;</span>)</a></code></pre></div>
<p>As done with candidate libraries, as explained in an earlier chapter, there is no avoiding going through the documentation of the library one wants to use to observe how it works. Forging a basic understanding of the library, we can build the following basic example.</p>
<div class="sourceCode" id="cb86"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb86-1" title="1"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></a>
<a class="sourceLine" id="cb86-2" title="2"><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb86-3" title="3"></a>
<a class="sourceLine" id="cb86-4" title="4"><span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb86-5" title="5">  <span class="co">&lt;!-- Import libraries --&gt;</span></a>
<a class="sourceLine" id="cb86-6" title="6">  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;jquery-3.5.1.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb86-7" title="7">  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;jquery.peity.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb86-8" title="8"><span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb86-9" title="9"></a>
<a class="sourceLine" id="cb86-10" title="10"><span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb86-11" title="11">  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></a>
<a class="sourceLine" id="cb86-12" title="12">  <span class="kw">&lt;span</span><span class="ot"> id=</span><span class="st">&quot;bar&quot;</span><span class="kw">&gt;</span>5,3,9,6,5,9,7,3,5,2<span class="kw">&lt;/span&gt;</span></a>
<a class="sourceLine" id="cb86-13" title="13"></a>
<a class="sourceLine" id="cb86-14" title="14">  <span class="co">&lt;!-- Script to create visualisation --&gt;</span></a>
<a class="sourceLine" id="cb86-15" title="15">  <span class="kw">&lt;script&gt;</span></a>
<a class="sourceLine" id="cb86-16" title="16">    <span class="at">$</span>(<span class="st">&quot;#bar&quot;</span>).<span class="at">peity</span>(<span class="st">&quot;bar&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb86-17" title="17">  <span class="kw">&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb86-18" title="18"><span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb86-19" title="19"></a>
<a class="sourceLine" id="cb86-20" title="20"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<p>Peity.js depends on jQuery. Hence the latter is imported first; the data for the chart is placed in a <code>&lt;span&gt;</code>, and the <code>peity</code> method is then used on the element containing the data. Peity.js uses <code>&lt;span&gt;</code> HTML tags as these work inline, using a <code>&lt;div&gt;</code> the chart will still display, but the purpose of using peity.js would be defeated.</p>
<div id="widgets-realistic-deps" class="section level2">
<h2><span class="header-section-number">6.1</span> Dependencies</h2>
<p>Once the package is created and the widget scaffold laid down, we need to add the JavaScript dependencies without which nothing can move forward.</p>
<p>Two dependencies are required in order for peity.js to run: peity.js and jQuery. Instead of using the CDN those are downloaded as this ultimately makes the package more robust (more easily reproducible outputs and no requirement for internet connection). Each of the two libraries is placed in its own respective directory.</p>
<div class="sourceCode" id="cb87"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb87-1" title="1"><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/jquery&quot;</span>)</a>
<a class="sourceLine" id="cb87-2" title="2"><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/peity&quot;</span>)</a>
<a class="sourceLine" id="cb87-3" title="3"></a>
<a class="sourceLine" id="cb87-4" title="4">peity &lt;-<span class="st"> </span><span class="kw">paste0</span>(</a>
<a class="sourceLine" id="cb87-5" title="5">  <span class="st">&quot;https://raw.githubusercontent.com/benpickles/&quot;</span>,</a>
<a class="sourceLine" id="cb87-6" title="6">  <span class="st">&quot;peity/master/jquery.peity.min.js&quot;</span></a>
<a class="sourceLine" id="cb87-7" title="7">)</a>
<a class="sourceLine" id="cb87-8" title="8">jquery &lt;-<span class="st"> </span><span class="kw">paste0</span>(</a>
<a class="sourceLine" id="cb87-9" title="9">  <span class="st">&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;</span></a>
<a class="sourceLine" id="cb87-10" title="10">)</a>
<a class="sourceLine" id="cb87-11" title="11"></a>
<a class="sourceLine" id="cb87-12" title="12"><span class="kw">download.file</span>(</a>
<a class="sourceLine" id="cb87-13" title="13">  jquery, <span class="st">&quot;./inst/htmlwidgets/jquery/jquery.min.js&quot;</span></a>
<a class="sourceLine" id="cb87-14" title="14">)</a>
<a class="sourceLine" id="cb87-15" title="15"><span class="kw">download.file</span>(</a>
<a class="sourceLine" id="cb87-16" title="16">  peity, <span class="st">&quot;./inst/htmlwidgets/peity/jquery.peity.min.js&quot;</span></a>
<a class="sourceLine" id="cb87-17" title="17">)</a></code></pre></div>
<p>This produces a directory that looks like this:</p>
<pre><code>.
├── DESCRIPTION
├── NAMESPACE
├── R
│   └── peity.R
└── inst
    └── htmlwidgets
        ├── jquery
        │   └── jquery.min.js
        ├── peity.js
        ├── peity.yaml
        └── peity
            └── jquery.peity.min.js</code></pre>
<p>In htmlwidgets, dependencies are specified in the <code>.yaml</code> file located at <code>inst/htmlwidgets</code>, which at first contains a commented template.</p>
<div class="sourceCode" id="cb89"><pre class="sourceCode yml"><code class="sourceCode yaml"><a class="sourceLine" id="cb89-1" title="1"><span class="co"># (uncomment to add a dependency)</span></a>
<a class="sourceLine" id="cb89-2" title="2"><span class="co"># dependencies:</span></a>
<a class="sourceLine" id="cb89-3" title="3"><span class="co">#  - name:</span></a>
<a class="sourceLine" id="cb89-4" title="4"><span class="co">#    version:</span></a>
<a class="sourceLine" id="cb89-5" title="5"><span class="co">#    src:</span></a>
<a class="sourceLine" id="cb89-6" title="6"><span class="co">#    script:</span></a>
<a class="sourceLine" id="cb89-7" title="7"><span class="co">#    stylesheet:</span></a></code></pre></div>
<p>Let’s uncomment those lines as instructed at the top of the file and fill it in.</p>
<div class="sourceCode" id="cb90"><pre class="sourceCode yml"><code class="sourceCode yaml"><a class="sourceLine" id="cb90-1" title="1"><span class="fu">dependencies:</span></a>
<a class="sourceLine" id="cb90-2" title="2">  <span class="kw">-</span> <span class="fu">name:</span><span class="at"> jQuery</span></a>
<a class="sourceLine" id="cb90-3" title="3">    <span class="fu">version:</span><span class="at"> </span><span class="fl">3.5.1</span></a>
<a class="sourceLine" id="cb90-4" title="4">    <span class="fu">src:</span><span class="at"> htmlwidgets/jquery</span></a>
<a class="sourceLine" id="cb90-5" title="5">    <span class="fu">script:</span><span class="at"> jquery.min.js</span></a>
<a class="sourceLine" id="cb90-6" title="6">  <span class="kw">-</span> <span class="fu">name:</span><span class="at"> peity</span></a>
<a class="sourceLine" id="cb90-7" title="7">    <span class="fu">version:</span><span class="at"> </span><span class="fl">3.3.0</span></a>
<a class="sourceLine" id="cb90-8" title="8">    <span class="fu">src:</span><span class="at"> htmlwidgets/peity</span></a>
<a class="sourceLine" id="cb90-9" title="9">    <span class="fu">script:</span><span class="at"> jquery.peity.min.js</span></a></code></pre></div>
<div class="rmdnote">
<p>
The order of the dependencies matters. Peity.js depends on jQuery hence the latter comes first in the <code>.yaml</code>.
</p>
</div>
<p>The order in which one specifies the dependencies matters, just like it does in an HTML file, therefore jQuery is listed first. The <code>stylesheet</code> entries were removed as none of these libraries require CSS files. The <code>src</code> path points to the directory containing the JavaScript files and stylesheets relative to the <code>inst</code> directory of the package; this is akin to using the <code>system.file</code> function to return the full path to a file or directory within the package.</p>
<div class="sourceCode" id="cb91"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb91-1" title="1">devtools<span class="op">::</span><span class="kw">load_all</span>()</a>
<a class="sourceLine" id="cb91-2" title="2"><span class="kw">system.file</span>(<span class="st">&quot;htmlwidgets/peity&quot;</span>, <span class="dt">package =</span> <span class="st">&quot;peity&quot;</span>)                                         </a>
<a class="sourceLine" id="cb91-3" title="3"><span class="co">#&gt; &quot;/home/me/packages/peity/inst/htmlwidgets/peity&quot;</span></a></code></pre></div>
<p>We should verify that this is correct by using the one R function the package features and check the source code of the output to verify that the dependencies are well present in the HTML output. We thus run <code>peity("test")</code>, open the output in the browser (<img src="images/open-in-browser.png" />) and look at the source code of the page. At the top of the page, you should see <code>jquery.min.js</code> and <code>jquery.peity.min.js</code> imported, clicking those links will either present you with the content of the file or an error.</p>
<div class="sourceCode" id="cb92"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb92-1" title="1"><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></a>
<a class="sourceLine" id="cb92-2" title="2"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb92-3" title="3"><span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb92-4" title="4"><span class="kw">&lt;meta</span><span class="ot"> charset=</span><span class="st">&quot;utf-8&quot;</span><span class="kw">/&gt;</span></a>
<a class="sourceLine" id="cb92-5" title="5"><span class="kw">&lt;style&gt;</span>body{<span class="kw">background-color</span>:<span class="cn">white</span><span class="op">;</span>}<span class="kw">&lt;/style&gt;</span></a>
<a class="sourceLine" id="cb92-6" title="6"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;lib/htmlwidgets-1.5.1/htmlwidgets.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb92-7" title="7"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;lib/jQuery-3.5.1/jquery.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb92-8" title="8"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;lib/peity-3.3.0/jquery.peity.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb92-9" title="9"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;lib/peity-binding-0.0.0.9000/peity.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb92-10" title="10">...</a></code></pre></div>
</div>
<div id="widgets-realistic-implementation" class="section level2">
<h2><span class="header-section-number">6.2</span> Implementation</h2>
<p>The JavaScript code for peity.js is relatively uncomplicated. It is just one function, but integrating it with htmlwidgets requires some thinking. In the example below, peity is applied to the element with <code>id = 'elementId'</code>; the first argument of <code>peity</code> is the type of chart to produce from the data, and the second optional argument is a JSON of options.</p>
<div class="sourceCode" id="cb93"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb93-1" title="1"><span class="at">$</span>(<span class="st">&quot;#elementId&quot;</span>).<span class="at">peity</span>(<span class="st">&quot;bar&quot;</span><span class="op">,</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb93-2" title="2">  <span class="dt">fill</span><span class="op">:</span> [<span class="st">&quot;red&quot;</span><span class="op">,</span> <span class="st">&quot;green&quot;</span><span class="op">,</span> <span class="st">&quot;blue&quot;</span>]</a>
<a class="sourceLine" id="cb93-3" title="3"><span class="op">}</span>)</a></code></pre></div>
<p>Also, the data that peity uses to draw the inline chart is not passed to the function but taken from the HTML element.</p>
<div class="sourceCode" id="cb94"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb94-1" title="1"><span class="kw">&lt;span</span><span class="ot"> id=</span><span class="st">&quot;elementId&quot;</span><span class="kw">&gt;</span>5,3,9,6<span class="kw">&lt;/span&gt;</span></a></code></pre></div>
<p>Therefore, the htmlwidget will have to insert the data in the HTML element, then run the <code>peity</code> function to render the chart. Inserting the data is actually already done by htmlwidgets by default. Indeed the default htmlwidgets template takes a <code>message</code> from the R function, and inserts said message in the HTML element, passing a vector instead of a message produces precisely what peity expects!</p>
<div class="sourceCode" id="cb95"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb95-1" title="1"><span class="kw">peity</span>(<span class="kw">c</span>(<span class="dv">1</span>,<span class="dv">5</span>,<span class="dv">6</span>,<span class="dv">2</span>))</a></code></pre></div>
<div class="sourceCode" id="cb96"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb96-1" title="1"><span class="kw">&lt;div</span> </a>
<a class="sourceLine" id="cb96-2" title="2"><span class="ot">  id=</span><span class="st">&quot;htmlwidget-495cf47d1a2a4a56c851&quot;</span> </a>
<a class="sourceLine" id="cb96-3" title="3"><span class="ot">  style=</span><span class="st">&quot;width:960px;height:500px;&quot;</span> </a>
<a class="sourceLine" id="cb96-4" title="4"><span class="ot">  class=</span><span class="st">&quot;play html-widget&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb96-5" title="5">  1,5,6,2</a>
<a class="sourceLine" id="cb96-6" title="6"><span class="kw">&lt;/div&gt;</span></a></code></pre></div>
<p>The argument ought to be renamed nonetheless from <code>message</code> to <code>data</code>.</p>
<div class="sourceCode" id="cb97"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb97-1" title="1">peity &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, </a>
<a class="sourceLine" id="cb97-2" title="2">  <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</a>
<a class="sourceLine" id="cb97-3" title="3"></a>
<a class="sourceLine" id="cb97-4" title="4">  <span class="co"># forward options using x</span></a>
<a class="sourceLine" id="cb97-5" title="5">  x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb97-6" title="6">    <span class="dt">data =</span> data</a>
<a class="sourceLine" id="cb97-7" title="7">  )</a>
<a class="sourceLine" id="cb97-8" title="8"></a>
<a class="sourceLine" id="cb97-9" title="9">  <span class="co"># create widget</span></a>
<a class="sourceLine" id="cb97-10" title="10">  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb97-11" title="11">    <span class="dt">name =</span> <span class="st">&#39;peity&#39;</span>,</a>
<a class="sourceLine" id="cb97-12" title="12">    x,</a>
<a class="sourceLine" id="cb97-13" title="13">    <span class="dt">width =</span> width,</a>
<a class="sourceLine" id="cb97-14" title="14">    <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb97-15" title="15">    <span class="dt">package =</span> <span class="st">&#39;peity&#39;</span>,</a>
<a class="sourceLine" id="cb97-16" title="16">    <span class="dt">elementId =</span> elementId</a>
<a class="sourceLine" id="cb97-17" title="17">  )</a>
<a class="sourceLine" id="cb97-18" title="18">}</a></code></pre></div>
<p>The change in the R code must be mirrored in the <code>peity.js</code> file, where it should set the <code>innerText</code> to <code>x.data</code> instead of <code>x.message</code>.</p>
<div class="sourceCode" id="cb98"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb98-1" title="1"><span class="co">// peity.js</span></a>
<a class="sourceLine" id="cb98-2" title="2"><span class="co">// el.innerText = x.message;</span></a>
<a class="sourceLine" id="cb98-3" title="3"><span class="va">el</span>.<span class="at">innerText</span> <span class="op">=</span> <span class="va">x</span>.<span class="at">data</span><span class="op">;</span></a></code></pre></div>
<p>This leaves the implementation of peity.js to turn the data into an actual chart. The way we shall go about it is to paste one of the examples in the <code>renderValue</code> function.</p>
<div class="sourceCode" id="cb99"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb99-1" title="1">renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb99-2" title="2"></a>
<a class="sourceLine" id="cb99-3" title="3">  <span class="co">// insert data</span></a>
<a class="sourceLine" id="cb99-4" title="4">  <span class="va">el</span>.<span class="at">innerText</span> <span class="op">=</span> <span class="va">x</span>.<span class="at">data</span><span class="op">;</span></a>
<a class="sourceLine" id="cb99-5" title="5"></a>
<a class="sourceLine" id="cb99-6" title="6">  <span class="co">// run peity</span></a>
<a class="sourceLine" id="cb99-7" title="7">  <span class="at">$</span>(<span class="st">&quot;#elementId&quot;</span>).<span class="at">peity</span>(<span class="st">&quot;bar&quot;</span><span class="op">,</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb99-8" title="8">    <span class="dt">fill</span><span class="op">:</span> [<span class="st">&quot;red&quot;</span><span class="op">,</span> <span class="st">&quot;green&quot;</span><span class="op">,</span> <span class="st">&quot;blue&quot;</span>]</a>
<a class="sourceLine" id="cb99-9" title="9">  <span class="op">}</span>)</a>
<a class="sourceLine" id="cb99-10" title="10"></a>
<a class="sourceLine" id="cb99-11" title="11"><span class="op">}</span></a></code></pre></div>
<p>One could be tempted to run <code>devtools::load_all</code>, but this will not work, namely because the function uses a selector that will not return any object; it needs to be applied to the div created by the widget not <code>#elementId</code>. As explained in the previous chapter, the selector of the element created is accessible from the <code>el</code> object. As a matter of fact, we did log in the browser console the id of the created div taken from <code>el.id</code>. Therefore concatenating the pound sign and the element id produces the selector to said element (<code>.class</code>, <code>#id</code>).</p>
<div class="sourceCode" id="cb100"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb100-1" title="1"><span class="at">$</span>(<span class="st">&quot;#&quot;</span> <span class="op">+</span> <span class="va">el</span>.<span class="at">id</span>).<span class="at">peity</span>(<span class="st">&quot;bar&quot;</span><span class="op">,</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb100-2" title="2">  <span class="dt">fill</span><span class="op">:</span> [<span class="st">&quot;red&quot;</span><span class="op">,</span> <span class="st">&quot;green&quot;</span><span class="op">,</span> <span class="st">&quot;blue&quot;</span>]</a>
<a class="sourceLine" id="cb100-3" title="3"><span class="op">}</span>)</a></code></pre></div>
<p>This will work but can be further simplified; there is no need to recreate a selector using the <code>id</code> of the <code>el</code> element; the latter can be used in the jQuery selector directly.</p>
<div class="sourceCode" id="cb101"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb101-1" title="1"><span class="at">$</span>(el).<span class="at">peity</span>(<span class="st">&quot;bar&quot;</span><span class="op">,</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb101-2" title="2">  <span class="dt">fill</span><span class="op">:</span> [<span class="st">&quot;red&quot;</span><span class="op">,</span> <span class="st">&quot;green&quot;</span><span class="op">,</span> <span class="st">&quot;blue&quot;</span>]</a>
<a class="sourceLine" id="cb101-3" title="3"><span class="op">}</span>)</a></code></pre></div>
<p>This will now produce a working widget, albeit limited to creating charts of a predefined type and colour. Next, these options defining the chart type, fill colours, and others must be made available from R.</p>
<p>Below we add a <code>type</code> argument to the <code>peity</code> function; this <code>type</code> argument is then forwarded to <code>x</code>, so it is serialised and accessible in the JavaScript file.</p>
<div class="sourceCode" id="cb102"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb102-1" title="1">peity &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">type =</span> <span class="kw">c</span>(<span class="st">&quot;bar&quot;</span>, <span class="st">&quot;line&quot;</span>, <span class="st">&quot;pie&quot;</span>, <span class="st">&quot;donut&quot;</span>), </a>
<a class="sourceLine" id="cb102-2" title="2">  <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</a>
<a class="sourceLine" id="cb102-3" title="3"></a>
<a class="sourceLine" id="cb102-4" title="4">  type &lt;-<span class="st"> </span><span class="kw">match.arg</span>(type)</a>
<a class="sourceLine" id="cb102-5" title="5"></a>
<a class="sourceLine" id="cb102-6" title="6">  <span class="co"># forward options using x</span></a>
<a class="sourceLine" id="cb102-7" title="7">  x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb102-8" title="8">    <span class="dt">data =</span> data,</a>
<a class="sourceLine" id="cb102-9" title="9">    <span class="dt">type =</span> type</a>
<a class="sourceLine" id="cb102-10" title="10">  )</a>
<a class="sourceLine" id="cb102-11" title="11"></a>
<a class="sourceLine" id="cb102-12" title="12">  <span class="co"># create widget</span></a>
<a class="sourceLine" id="cb102-13" title="13">  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb102-14" title="14">    <span class="dt">name =</span> <span class="st">&#39;peity&#39;</span>,</a>
<a class="sourceLine" id="cb102-15" title="15">    x,</a>
<a class="sourceLine" id="cb102-16" title="16">    <span class="dt">width =</span> width,</a>
<a class="sourceLine" id="cb102-17" title="17">    <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb102-18" title="18">    <span class="dt">package =</span> <span class="st">&#39;peity&#39;</span>,</a>
<a class="sourceLine" id="cb102-19" title="19">    <span class="dt">elementId =</span> elementId</a>
<a class="sourceLine" id="cb102-20" title="20">  )</a>
<a class="sourceLine" id="cb102-21" title="21">}</a></code></pre></div>
<p>This should then be applied by replacing the hard-coded type (<code>"bar"</code>) to <code>x.type</code>.</p>
<div class="sourceCode" id="cb103"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb103-1" title="1"><span class="at">$</span>(el).<span class="at">peity</span>(<span class="va">x</span>.<span class="at">type</span><span class="op">,</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb103-2" title="2">  <span class="dt">fill</span><span class="op">:</span> [<span class="st">&quot;red&quot;</span><span class="op">,</span> <span class="st">&quot;green&quot;</span><span class="op">,</span> <span class="st">&quot;blue&quot;</span>]</a>
<a class="sourceLine" id="cb103-3" title="3"><span class="op">}</span>)</a></code></pre></div>
<p>Reloading the package will now let one create a chart and define its type, but some options remain hard-coded. These can be made available from R in a variety of ways depending on the interface one wants to provide users of the package. Here we make them available via the three-dot construct (<code>...</code>), which are captured in a list and forwarded to the <code>x</code> object.</p>
<div class="sourceCode" id="cb104"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb104-1" title="1">peity &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">type =</span> <span class="kw">c</span>(<span class="st">&quot;bar&quot;</span>, <span class="st">&quot;line&quot;</span>, <span class="st">&quot;pie&quot;</span>, <span class="st">&quot;donut&quot;</span>), </a>
<a class="sourceLine" id="cb104-2" title="2">  ..., <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</a>
<a class="sourceLine" id="cb104-3" title="3"></a>
<a class="sourceLine" id="cb104-4" title="4">  type &lt;-<span class="st"> </span><span class="kw">match.arg</span>(type)</a>
<a class="sourceLine" id="cb104-5" title="5"></a>
<a class="sourceLine" id="cb104-6" title="6">  <span class="co"># forward options using x</span></a>
<a class="sourceLine" id="cb104-7" title="7">  x =<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb104-8" title="8">    <span class="dt">data =</span> data,</a>
<a class="sourceLine" id="cb104-9" title="9">    <span class="dt">type =</span> type,</a>
<a class="sourceLine" id="cb104-10" title="10">    <span class="dt">options =</span> <span class="kw">list</span>(...)</a>
<a class="sourceLine" id="cb104-11" title="11">  )</a>
<a class="sourceLine" id="cb104-12" title="12"></a>
<a class="sourceLine" id="cb104-13" title="13">  <span class="co"># create widget</span></a>
<a class="sourceLine" id="cb104-14" title="14">  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb104-15" title="15">    <span class="dt">name =</span> <span class="st">&#39;peity&#39;</span>,</a>
<a class="sourceLine" id="cb104-16" title="16">    x,</a>
<a class="sourceLine" id="cb104-17" title="17">    <span class="dt">width =</span> width,</a>
<a class="sourceLine" id="cb104-18" title="18">    <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb104-19" title="19">    <span class="dt">package =</span> <span class="st">&#39;peity&#39;</span>,</a>
<a class="sourceLine" id="cb104-20" title="20">    <span class="dt">elementId =</span> elementId</a>
<a class="sourceLine" id="cb104-21" title="21">  )</a>
<a class="sourceLine" id="cb104-22" title="22">}</a></code></pre></div>
<p>These can then be easily accessed from JavaScript.</p>
<div class="sourceCode" id="cb105"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb105-1" title="1"><span class="at">$</span>(el).<span class="at">peity</span>(<span class="va">x</span>.<span class="at">type</span><span class="op">,</span> <span class="va">x</span>.<span class="at">options</span>)</a></code></pre></div>
<p>This makes (nearly) all of the functionalities of peity.js available from R. Below we use <code>htmltools::browsable</code> to create multiple widgets at once, the function only accepts a single value, so the charts are wrapped in an <code>htmltools::tagList</code>. Let us explain those in reverse order, <code>tagList</code> accepts a group of tags or valid HTML outputs like htmlwidgets and wraps them into one, it is necessary here because the function <code>browsable</code> only accepts one value. Typically htmltools tags are just printed in the console; here we need them to be opened in the browser instead. Remember to run <code>devtools::load_all</code> so you can run the <code>peity</code> function we just wrote.</p>
<div class="sourceCode" id="cb106"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb106-1" title="1"><span class="kw">library</span>(htmltools)</a>
<a class="sourceLine" id="cb106-2" title="2"></a>
<a class="sourceLine" id="cb106-3" title="3"><span class="kw">browsable</span>(</a>
<a class="sourceLine" id="cb106-4" title="4">  <span class="kw">tagList</span>(</a>
<a class="sourceLine" id="cb106-5" title="5">    <span class="kw">peity</span>(<span class="kw">runif</span>(<span class="dv">5</span>)),</a>
<a class="sourceLine" id="cb106-6" title="6">    <span class="kw">peity</span>(<span class="kw">runif</span>(<span class="dv">5</span>), <span class="dt">type =</span> <span class="st">&quot;line&quot;</span>),</a>
<a class="sourceLine" id="cb106-7" title="7">    <span class="kw">peity</span>(<span class="st">&quot;1/4&quot;</span>, <span class="dt">type =</span> <span class="st">&quot;pie&quot;</span>, <span class="dt">fill =</span> <span class="kw">c</span>(<span class="st">&quot;#c6d9fd&quot;</span>, <span class="st">&quot;#4d89f9&quot;</span>)),</a>
<a class="sourceLine" id="cb106-8" title="8">    <span class="kw">peity</span>(<span class="kw">c</span>(<span class="dv">3</span>,<span class="dv">5</span>), <span class="dt">type =</span> <span class="st">&quot;donut&quot;</span>)</a>
<a class="sourceLine" id="cb106-9" title="9">  )</a>
<a class="sourceLine" id="cb106-10" title="10">)</a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:peity-divs"></span>
<img src="images/peity-div.png" alt="Peity output with DIV" width="100%" />
<p class="caption">
FIGURE 6.1: Peity output with DIV
</p>
</div>
<p>There is nonetheless one remaining issue in Figure <a href="widgets-realistic.html#fig:peity-divs">6.1</a>: peity.js is meant to create inline charts within <code>&lt;span&gt;</code> HTML tags but these are created within <code>&lt;div&gt;</code> hence each chart appears on a new line.</p>
</div>
<div id="widgets-realistic-html-element" class="section level2">
<h2><span class="header-section-number">6.3</span> HTML Element</h2>
<p>As pointed out multiple times, the widget is generated in a <code>&lt;div&gt;</code>, which is working fine for most visualisation libraries. However, we saw that peity.js works best when placed in a <code>&lt;span&gt;</code> as this allows placing the charts inline.</p>
<p>This can be changed by placing a function named <code>widgetname_html</code>, which is looked up by htmlwidgets and used if found. This is probably the first such function one encounters and is relatively uncommon, but it is literally how the htmlwidgets package does it: it scans the namespace of the package looking for a function that starts with the name of the widget and ends in <code>_html</code> and if found uses it. Otherwise, it uses the default <code>div</code>. This function takes the three-dot construct (<code>...</code>) and uses them in an htmltools tag. The three-dots are necessary because internally htmlwidgets need to be able to pass the <code>id</code>, <code>class</code>, and <code>style</code> attributes to the tag.</p>
<div class="sourceCode" id="cb107"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb107-1" title="1">peity_html &lt;-<span class="st"> </span><span class="cf">function</span>(...){</a>
<a class="sourceLine" id="cb107-2" title="2">  htmltools<span class="op">::</span>tags<span class="op">$</span><span class="kw">span</span>(...)</a>
<a class="sourceLine" id="cb107-3" title="3">}</a></code></pre></div>
<p>This can also come in handy if some arguments must be hard-coded, such as assigning a specific class to every widget.</p>
<div class="sourceCode" id="cb108"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb108-1" title="1">myWidget_html &lt;-<span class="st"> </span><span class="cf">function</span>(..., class){</a>
<a class="sourceLine" id="cb108-2" title="2">  htmltools<span class="op">::</span>tags<span class="op">$</span><span class="kw">div</span>(..., <span class="dt">class =</span> <span class="kw">c</span>(class, <span class="st">&quot;my-class&quot;</span>))</a>
<a class="sourceLine" id="cb108-3" title="3">}</a></code></pre></div>
<p>Reloading the package after placing the function above anywhere in the package will produce inline charts, as show in Figure <a href="widgets-realistic.html#fig:peity-spans">6.2</a>.</p>
<div class="sourceCode" id="cb109"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb109-1" title="1"><span class="kw">browsable</span>(</a>
<a class="sourceLine" id="cb109-2" title="2">  <span class="kw">tagList</span>(</a>
<a class="sourceLine" id="cb109-3" title="3">    <span class="kw">p</span>(</a>
<a class="sourceLine" id="cb109-4" title="4">      <span class="st">&quot;We can now&quot;</span>, <span class="kw">peity</span>(<span class="kw">runif</span>(<span class="dv">5</span>)),</a>
<a class="sourceLine" id="cb109-5" title="5">      <span class="st">&quot;use peity&quot;</span>, <span class="kw">peity</span>(<span class="kw">runif</span>(<span class="dv">5</span>), <span class="dt">type =</span> <span class="st">&quot;line&quot;</span>),</a>
<a class="sourceLine" id="cb109-6" title="6">      <span class="st">&quot;inline with text!&quot;</span>,</a>
<a class="sourceLine" id="cb109-7" title="7">      <span class="kw">peity</span>(<span class="kw">c</span>(<span class="dv">4</span>,<span class="dv">2</span>), <span class="dt">type =</span> <span class="st">&quot;donut&quot;</span>)</a>
<a class="sourceLine" id="cb109-8" title="8">    )</a>
<a class="sourceLine" id="cb109-9" title="9">  )</a>
<a class="sourceLine" id="cb109-10" title="10">)</a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:peity-spans"></span>
<img src="images/peity-span.png" alt="Peity output with SPAN" width="100%" />
<p class="caption">
FIGURE 6.2: Peity output with SPAN
</p>
</div>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="widgets-first.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="widgets-full.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/3-23-htmlwidgets-peity.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
